<template>
  <Panel :image="group.avatar" :title="group.name" :list="list"></Panel>
</template>

<script setup>
import { computed } from 'vue'
import Panel from '@/components/panel/index.vue'
import { dayjs } from 'element-plus'

const props = defineProps({
  group: {
    type: Object,
    default: () => ({})
  }
})

const list = computed(() => {
  const { description, memberCount, onlineCount, createTime } = props.group
  
  const duration = createTime 
    ? Math.floor(dayjs(new Date()).diff(dayjs(createTime), 'hour') / 24) + '天' 
    : '-'
  
  return [
    { label: '群描述', value: description || '暂无描述' },
    { label: '群成员', value: `${memberCount || 0}人` },
    { label: '在线成员', value: `${onlineCount || 0}人` },
    { label: '创建时间', value: createTime ? dayjs(createTime).format('YYYY-MM-DD HH:mm:ss') : '-' },
  ]
})
</script>

<style lang="scss" scoped>
</style> 